<clr-alert *ngIf="errorFlag" [clrAlertType]="'danger'">
    <div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<clr-alert *ngIf="successFlag" [clrAlertType]="'success'">
    <div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<div>
    <h3 class="modal-title">Execute/Schedule CPU Fault</h3>
    <form #cpuForm="ngForm" (ngSubmit)="executeCpuFault(cpuForm.value);" ngNativeValidate>
        <section class="form-block">
            <div class="form-group">
                <label for="endpointName">Endpoint</label>
                <clr-dropdown>
                    <input clrDropdownTrigger type="text" name="endpointName" (input)="searchEndpoint($event.target.value);displayEndpointFields($event.target.value);" [(ngModel)]="faultFormData.endpointName" />
                    <clr-icon shape="caret down" clrDropdownTrigger size="24" (click)="searchEndpoint('');"></clr-icon>
                    <clr-dropdown-menu *clrIfOpen clrPosition="bottom-left">
                        <ng-container *ngFor="let searchedEndpoint of searchedEndpoints">
                            <button type="button" clrDropdownItem *ngIf="searchedEndpoint.endPointType == 'MACHINE' || searchedEndpoint.endPointType == 'K8S_CLUSTER' || searchedEndpoint.endPointType == 'DOCKER'" (click)="setEndpointVal(searchedEndpoint.name);displayEndpointFields(searchedEndpoint.name);">{{searchedEndpoint.name}}</button>
                        </ng-container>
                    </clr-dropdown-menu>
                </clr-dropdown>
            </div>
            <div class="form-group">
                <label for="cpuLoad">CPU Load (%)</label>
                <input type="number" name="cpuLoad" [(ngModel)]="faultFormData.cpuLoad" min="1" max="100" required>
            </div>
            <div class="form-group">
                <label for="injectionHomeDir">Injection Home Dir (optional)</label>
                <input type="text" name="injectionHomeDir" [(ngModel)]="faultFormData.injectionHomeDir">
            </div>
            <div class="form-group">
                <label for="timeoutInMilliseconds">Timeout Milliseconds</label>
                <input type="number" min="0" max="2147483647" name="timeoutInMilliseconds" [(ngModel)]="faultFormData.timeoutInMilliseconds" required>
            </div>
            <div [hidden]="dockerHidden">
                <div class="form-group">
                    <label><b>Docker Arguments</b></label>
                </div>
                <br />
                <fieldset ngModelGroup="dockerArguments">
                    <div class="form-group">
                        <label for="containerName">Container Name</label>
                        <input type="text" name="containerName" [(ngModel)]="faultFormData.dockerArguments.containerName" [required]="!dockerHidden">
                    </div>
                </fieldset>
            </div>
            <div [hidden]="k8sHidden">
                <div class="form-group">
                    <label><b>K8S Arguments</b></label>
                </div>
                <br />
                <fieldset ngModelGroup="k8sArguments">
                    <div class="form-group">
                        <label for="containerName">Container Name</label>
                        <input type="text" name="containerName" [(ngModel)]="faultFormData.k8sArguments.containerName" [required]="!k8sHidden">
                    </div>
                    <div class="form-group">
                        <label for="podLabels">Pod Labels</label>
                        <input type="text" name="podLabels" [(ngModel)]="faultFormData.k8sArguments.podLabels" [required]="!k8sHidden">
                    </div>
                    <div class="form-group">
                        <label for="enableRandomInjection">Random Injection</label>
                        <div class="select">
                            <select name="enableRandomInjection" [(ngModel)]="faultFormData.k8sArguments.enableRandomInjection" [required]="!k8sHidden">
                                <option [ngValue]="true">true</option>
                                <option [ngValue]="false">false</option>
                            </select>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="form-group">
                <label><b>JVM Properties</b></label>
            </div>
            <br />
            <fieldset ngModelGroup="jvmProperties">
                <div class="form-group">
                    <label for="javaHomePath">Java Home</label>
                    <input type="text" name="javaHomePath" [(ngModel)]="faultFormData.jvmProperties.javaHomePath">
                </div>
                <div class="form-group">
                    <label for="jvmprocess">JVM Process</label>
                    <input type="text" name="jvmprocess" [(ngModel)]="faultFormData.jvmProperties.jvmprocess" required>
                </div>
                <div class="form-group">
                    <label for="port">Free Port</label>
                    <input type="number" name="port" [(ngModel)]="faultFormData.jvmProperties.port" min="0" max="65535" required>
                </div>
                <div class="form-group">
                    <label for="user">Logon User</label>
                    <input type="text" name="user" [(ngModel)]="faultFormData.jvmProperties.user">
                </div>
            </fieldset>
            <div class="form-group">
                <label><b>Schedule</b></label>
            </div>
            <br />
            <fieldset ngModelGroup="schedule">
                <div class="form-group">
                    <label>Schedule</label>
                    <div class="clr-control-container clr-control-inline">
                        <div class="clr-radio-wrapper">
                            <input type="radio" id="timeInMilliseconds" name="scheduleBody" value="timeInMilliseconds" class="clr-radio" (click)="setScheduleVal($event.target);">
                            <label for="timeInMilliseconds" class="clr-control-label">One Time</label>
                        </div>
                        <div class="clr-radio-wrapper">
                            <input type="radio" id="cronExpression" name="scheduleBody" value="cronExpression" class="clr-radio" (click)="setScheduleVal($event.target);">
                            <label for="cronExpression" class="clr-control-label">Recurrence</label>
                        </div>
                    </div>
                </div>
                <div class="form-group" [hidden]="timeInMillisecondsHidden">
                    <input type="number" min="0" max="2147483647" name="timeInMilliseconds" [(ngModel)]="faultFormData.schedule.timeInMilliseconds" [required]="!timeInMillisecondsHidden" (input)="setSubmitButton();">&nbsp;&nbsp;<span style="height:39px;">Time Milliseconds</span>
                </div>
                <div class="form-group" [hidden]="cronExpressionHidden">
                    <input type="text" name="cronExpression" [(ngModel)]="faultFormData.schedule.cronExpression" [required]="!cronExpressionHidden" (input)="setSubmitButton();">
                    <clr-icon shape="calendar" style="width:21px;height:39px;" (click)="cronModal=true;"></clr-icon>
                </div>
                <div class="form-group" [hidden]="descriptionHidden">
                    <input type="text" name="description" [(ngModel)]="faultFormData.schedule.description">&nbsp;&nbsp;<span style="height:39px;">Description (optional)</span>
                </div>
            </fieldset>
            <div class="form-group">
                <label for="tags">Tags</label>
                <span class="label label-info" *ngFor="let item of tagsData | keyvalue">{{item.key}}={{item.value}}&nbsp;<clr-icon shape="times" size="12" (click)="removeTag(item.key);"></clr-icon></span>
                <clr-icon shape="plus-circle" (click)="tagsModal=true;" style="width:21px;height:30px;"></clr-icon>
            </div>
        </section>
        <button type="submit" class="btn btn-primary" [disabled]="disableSchedule">SCHEDULE FAULT</button>
        <button type="submit" class="btn btn-primary" [clrLoading]="runBtnState" [disabled]="disableRun">RUN FAULT</button>
    </form>
</div>
<app-cron [(cronModal)]="cronModal" [(cronValOrig)]="faultFormData.schedule.cronExpression" (cronMessageEvent)="setScheduleCron($event);"></app-cron>
<clr-modal [(clrModalOpen)]="tagsModal">
    <h3 class="modal-title">Add Tags</h3>
    <div class="modal-body">
        <form #tagsForm="ngForm" (ngSubmit)="updateTags(tagsForm.value);tagsModal=false;tagsForm.reset();">
            <section class="form-block">
                <div class="form-group">
                    <label for="tagKey">Key</label>
                    <input type="text" name="tagKey" ngModel>
                </div>
                <div class="form-group">
                    <label for="tagValue">Value</label>
                    <input type="text" name="tagValue" ngModel>
                </div>
            </section>
            <button type="button" class="btn btn-outline" (click)="tagsModal=false;">CANCEL</button>
            <button type="submit" class="btn btn-primary">ADD</button>
        </form>
    </div>
</clr-modal>